<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>key的使用</title>
  <script src="vue.js"></script>
</head>
<!--

-->
<body>
<div id="root">
    <input type="text" placeholder="scanf name" v-model="value">
        <button @click="sortType=1" >升序</button>
        <button @click="sortType=2" >降序</button>
        <button @click="sortType=0" >原序列</button>

    <ul>
        <h2>List:</h2>
<!--        遍历数组-->
        <li v-for="(p,index) in newPersons" :key="p.id">{{p.name}}-{{p.age}}</li>

    </ul>
</div>
</body>
<script type="text/javascript">
    const  vm = new Vue({
        el:"#root",
        data:{
            value:'',
            persons:[
                {id:'001',name:"马冬梅",age:1},
                {id:'002',name:"周冬雨",age:19},
                {id:'003',name:"周杰伦",age:13},
                {id:'004',name:"盖伦",age:16}
            ],
            sortType:0

        },
        //computed实现搜索
        computed:{
            newPersons(){
               const arr = this.persons.filter((p)=>{return p.name.indexOf(this.value)!==-1})
                if(this.sortType){
                   arr.sort((a,b)=>{
                    return this.sortType===1? a.age-b.age:b.age-a.age
                   })
                }
                return arr
            },
        },

    })

</script>

</html>